<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环-重复数据</title>
</head>
<body>
<div id="wrap" >
    <button @click="add()">添加</button>
    <ul>
        <!--在vue1.x中添加track-by='$index';可以解决添加的数据重复问题:在vue2.0x中使用v-bind:key="$index"替换-->
        <!--<li v-for="item in arr" track-by="$index">{{item}}</li>-->
        <li v-for="item in arr" :key="$index">{{item}}</li>
        <!--v-bind:key="item.id"-->
    </ul>
</div>
</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#wrap',
        data: {
            arr:['apple','pear','banana','banana']
        },
        methods:{
            add:function () {
                this.arr.push('tomato')
            }
        },
    })

</script>